<template>
	<div>
		<div class="main_operation">
			<div class="operation_left"></div>
			<div class="operation_right">
				<span class="fxBox" style="width: 40px;">日期:</span><a-range-picker class="mr10" :placeholder="['开始时间', '结束时间']" />
				<span class="fxBox" style="width: 40px;">设备:</span><a-select class="mr10" style="width: 120px" placeholder="设备名称">
					<a-select-option value="jack">Jack</a-select-option>
					<a-select-option value="lucy">Lucy</a-select-option>
				</a-select>
				<span class="fxBox" style="width: 40px;">品名:</span><a-select class="mr10" style="width: 120px" placeholder="设备数据">
					<a-select-option value="jack">Jack</a-select-option>
					<a-select-option value="lucy">Lucy</a-select-option>
				</a-select>
				<a-button class="mr10" type="primary">查询登记记录</a-button>
				<a-button class="mr10" type="primary">导出数据</a-button>
			</div>
		</div>
		<a-alert v-if="testAlert" message="检验操作成功" type="success" showIcon />
		<div class="main">
			<a-card :bordered="false">
				<a-card-grid v-for="item in listdata" :key="item.id" style="width:25%;textAlign:'center'">
					<table class="tableBox" style="width:100%; text-align: center;">
						<tr style="background: #fafafa;">
							<th>品名</th>
							<th>数量</th>
						</tr>
						<tr>
							<td>{{item.a}}</td>
							<td>{{item.b}}</td>
						</tr>
					</table>
				</a-card-grid>
			</a-card>
		</div>
	</div>
</template>

<script>
    export default {
        name: "Statistics",
				data() {
					return {
						testAlert: false,
						columns:[],
						listdata: [],
					}
				},
				mounted() {
					this.getList();
				},
				methods: {
					getList() {
						this.columns = [
							{
								title: '品名',
								dataIndex: 'a',
								key: 'a',
								align: 'center',
								scopedSlots: { customRender: 'a' },
								width: 60
							},
							{
								title: '数量',
								// fixed: 'left',
								dataIndex: 'b',
								key: 'b',
								align: 'center',
								width: 60
							},
							{
								title: '操作',
								dataIndex: 'operation',
								key: 'operation',
								scopedSlots: { customRender: 'operation' },
								align: 'center',
								width: 60
							}
						];
						for (let i = 1; i <= 10; i++) {
							this.listdata.push({
								id: i,
								a: '名称'+i,
								b: 1000+i,
							});
						}
					}
				},
    }
</script>

<style scoped>
	.tableBox th{
		padding: 12px 0;
		border-bottom: 1px solid #CCCCCC;
	}
	.tableBox td{
		padding: 12px 0;
	}
</style>
